<template>
  <Row type="flex">
    <Col flex="600px"> <h2 class="title2">良好行为记录 <i>{{ config.page.total }}</i></h2></Col>
    <Col flex="550px">

    </Col>
  </Row>

  <Table
      :columns="config.columns"
      :row-key="record => record.id"
      :data-source="config.list"
      :pagination="config.page"
      :loading="config.loading"
      @change="(pagination)=> changeHandler(pagination, config)"
      bordered
  >
    <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>
    <template #name="{ text, record }">
      <router-link target="_blank" :to="{ path: `/staff/${record.id}` }" class="blue" >
        {{ text }}
      </router-link>
    </template>
  </Table>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive, toRefs} from 'vue';
import {Row, Col, Table } from 'ant-design-vue';
import { getCreditRecordGoodApi  } from '/@/api/company';
import {creditInvalidFlag, parseTime} from '/@/utils';

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '信用指标', dataIndex: 'creditName',width: 380},
  { title: '行为发生时间', dataIndex: 'creditActionDate', width: 120 , customRender: ({ text })=> parseTime(text)},
  { title: '行为发生地区', dataIndex: 'creditActionArea' ,width: 200},
  { title: '记录状态', dataIndex: 'creditInvalidFlag' ,width: 90, customRender: ({ text })=> creditInvalidFlag (text)},
  { title: '信用评价周期', dataIndex: 'creditEvaSdate', width: 200 , customRender: ({ record })=> parseTime(record.creditEvaSdate)+' ~ '+ parseTime(record.creditEvaEdate)},
  { title: '记录分值', dataIndex: 'creditScore' }
]

export default defineComponent({
  components: {
    Table , Row, Col
  },
  setup() {
    const corpId = inject('corpId') as string;


    const config = reactive({
      columns: columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      }
    })



    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      loading.value = true;
      getCreditRecordGoodApi( { corpId, current  }).then( data => {
        let { records, current, total } = data;
        list.value = records;
        loading.value = false;
        page.value = {current, total};
      })
    }


    const init = () => {
      changeHandler({current: 1}, config);


    }
    onMounted(init)


    return {
      config, changeHandler  , parseTime , creditInvalidFlag
    }
  },
})
</script>

<style lang="less" scoped>

.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

.ant-col.text-right{
  padding-right: 0 !important;
}

</style>
